<template>
	<nav-header v-if="type === 'FRIEND'" :title="`${title}好友圈`" custom-nav :show-right="false">
	</nav-header>
	<nav-header v-else :title="`${title}友商圈`" custom-nav :show-right="false">
	</nav-header>
	<view>
		<view class="moments-bac">
			<image class="qun-bg" @click="topviewImage(userInfo.bgPicture)" @longpress="selectImage" :src="userInfo.bgPicture" mode="scaleToFill"
				v-if="userInfo.bgPicture"></image>
			<image class="qun-bg" @click="topviewImage(gudingImg)" @longpress="selectImage" :src="gudingImg" mode="scaleToFill" v-else></image>
			<view class="user-info">
				<text class="uname"> {{ userInfo.nickName }}</text>
				<head-image class="img" name="测试" :url="userInfo.headerImage" :size="100"
					v-if="userInfo.headerImage"></head-image>
				<head-image class="img" :name="userInfo.nickName" :url="userInfo.headImage" :size="100"
					v-else></head-image>
			</view>
		</view>
		<view class="right-align">{{ userInfo.signature }}</view>
		<view>
			<view class="flex-container" v-for="(circle, index) in FriendCircleList" :key="index"
				v-if="FriendCircleList.length>0">
				<view class=" publishDate">{{ circle.day }}<text style="font-size: 16px;">{{ circle.month }}月</text>
				</view>
				<view class="right-container">
					<view class=" right" v-for="(post, index1) in circle.items" 
						:key="index1">
						<view v-if="post && Array.isArray(post.pictureList) && post.pictureList.length > 0"
							class="img-container" @click="goToDetailsPage(post)">
							<image :src="post.pictureList[0]" class="moments-pictures"></image>
						</view>

						<view @click="goToDetailsPage(post)" class="text-style"
							:style="post.pictureList.length === 0 ? 'background-color: #f0f0f0;' : ''"><up-text
								:lines="4" :text="post.content"></up-text></view>
						<text class="delete" v-if="!id" @click="momentsDelete(post.id,index,index1)">删除</text>
					</view>
				</view>
			</view>
			<view v-else style="margin-top: 80px;">
				<view v-if="loading">
					<up-loading-icon text="努力加载中~"></up-loading-icon>
				</view>
				<view style="width: 70%;margin-left: 15vw;" v-else>
					<up-divider text="分割线" :dot="true"></up-divider>
				</view>
			</view>
		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '我的',
				type: '',
				id: '',
				userInfo: {},
				FriendCircleList: [],
				pageNum: 1,
				pageSize: 10,
				loading: false,
				hasMore: true,
				gudingImg: "https://axure-file.lanhuapp.com/md5__5101406288fb224480674487be13a2bd.jpg"
			}

		},
		methods: {
			// 图片预览功能
			topviewImage(url) {
				let urls = [];
				urls.push(url);
				uni.previewImage({
					urls: urls,
					current: 0
				});
			},
			momentsDelete(id,index,index1){
				uni.showModal({
					title: '确认删除这条朋友圈吗?',
					success: (res) => {
						if (res.confirm) {
							this.$http({
								url: '/friendCircle/deleteCircle/'+id,
								method: 'Delete'
							}).then(res => {
								 uni.showToast({
									title:"删除成功",
									icon:"none"
								 })
								 this.FriendCircleList.splice(index,1)
							});
							
						}
					}
				});
			},
			
			selectImage() {},

			goToDetailsPage(post) {
				uni.navigateTo({
					url: "/pageSubOne/moments/moments-detail?id=" + post.id
				})

			},
			// 获取朋友圈列表
			getGetAFriendCircleList(type, id = null) {
				this.loading = true
				this.type = type
				console.log("id", id)
				let url = `/friendCircle/${type}/listCircle?pageNum=${this.pageNum}&pageSize=${this.pageSize}`;
				if (id !== null) {
					url += `&userId=${id}`;
				}
				console.log("url", url)
				this.$http({
					url: url,
					method: 'GET'
				}).then((res) => {
					if (res.list.length > 0) {
						const data = res.list
						const groupedResult = this._groupByMonthAndDay(data);
						const arrayList = this.convertToArrayList(groupedResult)
						console.log("arrayList", arrayList)
						this.FriendCircleList = this.FriendCircleList.concat(arrayList)
						this.pageNum++;
						this.loading = true
					} else {
						this.hasMore = false;
						this.loading = false
					}

				})


			},


			// 把数据按照月日分组 后续可能改成年月日分组
			_groupByMonthAndDay(data) {

				const groupedData = {};

				data.forEach(item => {
					const date = new Date(item.createTime);

					const year = date.getFullYear() //年
					const month = date.getMonth() + 1; // 月份从0开始，所以加1
					const day = date.getDate();
					const key = `${year}-${month}-${day}`;

					if (!groupedData[key]) {
						groupedData[key] = [];
					}

					groupedData[key].push(item);
				});

				return groupedData;
			},

			// 把对象转换位数组
			convertToArrayList(groupedData) {
				return Object.keys(groupedData).map(key => {
					const [year, month, day] = key.split('-');
					console.log(month)
					return {
						month: parseInt(month),
						day: parseInt(day),
						items: groupedData[key]
					};
				});

			},

			// 获取个人信息

			getInfo(id = null) {
				let url = '/friendCircle/getInfo'
				if (id !== null) {
					url += `?userId=${id}`;
				}
				this.$http({
					url: url,
					method: 'GET'
				}).then(res => {
					// #ifdef APP-PLUS
					if (res == null) {
						this.userInfo = this.userStore.userInfo
					} else {
						this.userInfo = res
					}
					// #endif
					// #ifndef APP-PLUS
					this.userInfo = res
					this.title = this.userInfo.nickName
					// #endif

					console.log('this.userInfo', this.userInfo.nickName)
				});


			},
		},


		onPullDownRefresh() {
			this.pageNum = 1;
			this.pageSize = 10;
			this.FriendCircleList = []
			this.hasMore = true
			// 处理下拉刷新
			
			uni.stopPullDownRefresh(); // 停止刷新动画
		},

		// 下拉加载
		onReachBottom() {

			if (this.hasMore) {
				this.getGetAFriendCircleList(this.type, this.id);
			}
			if (!this.hasMore) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				});
				return
			}
		},
		onLoad(options) {
			const {
				id,
				type
			} = options;

			const getCircleType = type === '0' ? 'FRIEND' : 'BUSINESS';
			this.type = getCircleType
			console.log('getCircleType', getCircleType)
			console.log('this.type', this.type)
			this.id = id
			this.getGetAFriendCircleList(getCircleType, id)
			this.getInfo(id)

		},
	};
</script>




<style lang="less" scoped>
	// 背景图
	.moments-bac {
		width: 100%;
		position: relative;

		.qun-bg {
			width: 100%;
			height: 200px;
		}

		.bac-img {
			width: 390px;
			height: 200px;
			background-color: #000;
		}

		.user-info {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			position: absolute;
			padding: 40rpx;
			right: 0;
			bottom: -30px;

			.uname {
				text-align: right;
				width: 75%;
				margin-right: 20rpx;
				margin-bottom: 10rpx;
				color: #fff;
				font-size: 38rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}

	.right-align {
		margin-left: 180rpx;
		margin-right: 24rpx;
		margin-top: 30rpx;
		font-size: 28rpx;
		text-align: right;
		/* 文字居右 */
		white-space: normal;
		/* 自动换行 */
		word-wrap: break-word;
		/* 处理长单词换行 */
	}

	.flex-container {
		display: flex;
		flex-direction: row;
		/* 水平排列 */
		align-items: flex-start;
		/* 垂直对齐方式 */
		padding: 20px;
	}

	.publishDate {
		font-size: 24px;
		font-weight: bold;
		margin-right: 20px;
	}

	.right-container {
		display: flex;
		flex-direction: column;
		/* 垂直排列 */
		flex: 1;
		/* 占据剩余空间 */
	}
    .delete{
		margin-left: 10px;
		font-size: 12px;
		color: gray;
	}
	.right {
		display: flex;
		flex-direction: row;
		/* 水平排列 */
		margin-bottom: 20px;
		/* 间距 */
	}

	.img-container {
		width: 100px;
		height: 100px;
		background-color: #ccc;
		/* 临时背景色 */
		margin-right: 10px;
	}

	// 图片大小 后续可以做成朋友那种 动态的显示
	.moments-pictures {
		width: 100px;
		height: 100px;
		border-radius: 5px;

	}

	.text-style {
		flex: 1;
		/* 占据剩余空间 */
		font-size: 16px;

	}

	// background-color: #f0f0f0; /* 浅灰色背景色 */
</style>